import { Connect } from 'dob-react';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { StoreProps } from '../../stores';
import EditHelper from './edit-helper/edit-helper.component';
import * as Styled from './viewport.style';

class Props extends StoreProps<void, void> {}

class State {}

@Connect
export default class Viewport extends React.Component<Props, State> {
  public static defaultProps = new Props();

  public state = new State();

  /**
   * 获取自己的实例
   */
  public getRef = (ref: React.ReactInstance) => {
    this.props.actions.ViewportAction.setViewportDOM(ReactDOM.findDOMNode(ref) as HTMLElement);
  };

  /**
   * 鼠标移开视图区域
   */
  public handleMouseLeave = (event: React.MouseEvent<HTMLDivElement>) => {
    event.stopPropagation();

    // 触发事件
    this.props.actions.EventAction.emit(this.props.stores.EventStore.mouseLeaveViewport);

    // 设置当前 hover 的元素为 null
    this.props.actions.ViewportAction.setCurrentHoverInstanceKey(null);
  };

  public render() {
    if (this.props.stores.ViewportStore.rootInstanceKey === null) {
      return null;
    }

    return (
      <Styled.Container onMouseLeave={this.handleMouseLeave} ref={this.getRef}>
        <EditHelper
          key={this.props.stores.ViewportStore.rootInstanceKey}
          instanceKey={this.props.stores.ViewportStore.rootInstanceKey}
        />
      </Styled.Container>
    );
  }
}
